<!-- 
    CSS3高级选择器

        动态伪类选择器
            锚点伪类：link、visited
            用户行为伪类：hover、active、focus
            目标伪类target（IE9及以上）  

        属性选择器
            E[attr]	        有属性att的所有E元素
            E[attr='val']	属性att的值是val的元素
            E[attr^='val']	属性att的值以val开头的元素
            E[attr$='val']	属性att的值以val结尾的元素
            E[attr*='val']	属性att的值包含val字符串的元素

        状态伪类选择器
            E:enabled	  匹配表单中可用的元素
            E:disabled	  匹配表单中禁用的元素
            E:checked	  匹配表单中被选中的radio（单选框）       或checkbox（复选框）元素

        结构性选择器
            E:first-child	选择第一个子元素E
            E:last-child	选择最后一个子元素E
            E:nth-child(n)	选择一个或多个特定的子元素 （第一个编号为1）
            E:nth-last-child(n)	选择一个或多个特定的子元素，从最后一个子元素开始算
            E:only-child	匹配父元素下仅有的一个子元素
            E:empty	匹配一个不包含任何子元素的元素 ( 文本节点也被看作子元素 )
            E:not(s)	匹配不符合当前选择器的任何元素( 反选 )

    CSS3其他
        圆角边框    border-radius
        文字阴影    text-shadow：
                        none | length{2,3} color 默认值：none

        盒子阴影    box-shadow:
                        none |inset length{2,4} color
        倒影        box-reflect:
                        below / above / left / right offset 

        滤镜设置    filter
                         blur(px)：模糊

                        brightness(%)：亮度

                        contrast(%)：对比度

                        opacity(%)：透明度

                        saturate(%)：饱和度   
                        
        渐变        
                        从上到下（默认）：background: linear-gradient(red,blue);
                        从左到右：background: linear-gradient(to right,red,blue);
                        对角：background: linear-gradient(to right bottom,red,blue);
                        角度background: linear-gradient(45deg,red,blue);

                        background: repeating-linear-gradient(90deg,red 0%,blue 20%);

                        background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);
        

        径向渐变         radial-gradient()

    CSS3 背景设置

        背景图原点         background-origin 


        背景图裁剪          background-clip

        背景图大小          background-size
        
        多重背景           background-image
        
        
    CSS动画
        过渡动画            transition

        关键帧动画
                        animation-name:move
                        @keyframes move{
                            0% { margin-left: 100px; background: green; }
                            40% { margin-left: 150px; background: orange; }
                            60% { margin-left: 75px; background: blue; }
                            100% { margin-left: 100px; background: red; }
                        }
    
    弹性盒子布局            display:flex


    响应式布局              自适应页面分辨率


        
                        -->
